<template>
	<view class="p-top30"  :style="{'--color':color}">
		<status-bar title='提现' :back='1'></status-bar>
		<view class="viewboxs auto ">
			<view class="list">
				<view class="row j-sb a-center white">
					<text class="size26">可提现</text>
					<text class="size26" @click="toUrl(`record`)">提现记录</text>
				</view>
				<view class="rows size42 bold white m-top20">{{pageData.income}}</view>
			</view>
		</view>

		<view class="navBox">
			<u-tabs :list="payInfo" keyName="to_name" @click="click" 
			     :current="current" lineWidth="28" lineColor="#000"
				:scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
		</view>
		
		<block v-for="(item,index) in payInfo" :key="index">
		<view class="wechat" :class="item.bankName?'backgg':'flexac'" 
		     @click="addAcount(item)" v-if="current == index">
			<view class="d-flex a-center"  v-if="item.bankName">
				<image :src="$imgUrls(item.account_img)" mode="aspectFit" class="CodineIMG" v-if="item.account_img"></image>
				<view class="d-flex f-column m-left20">
					<text class="white size32 bold">{{item.bankName}}</text>
					<text class="white size26 m-top20">{{item.userName}}（{{item.phone || item.bankCard}}）</text>
				</view>
			</view>
			<view class="d-flex a-center color bold" v-else>
				<view class="iconfont icon-tianjia h6 "></view>
				<text class="size28 m-left10">{{item.cash_method | methodTxt}}</text>
			</view>
		</view>
		</block>
	
		



		<view class="duihne">
			<text class="color_38 size28 bold">提现金额</text>
			<view class="row a-center m-top20 bot">
				<image :src="$pop.staticImg('jifen.png')" class="jifenIcon"></image>
				<input type="number" v-model="money" class="Jifen" placeholder="请填写提现金额" />
				<text class="color bold size26" @click="Exchange" v-if="pageData.income > 0">全部提现</text>
			</view>
			<text class="color_66 size26 m-top14">当前账号可提现金额：{{pageData.income}}</text>
			<view class="row j-sa a-center m-top50">
				<view class="btns flexac bgf4 size26 color_38" @click="$back()">考虑一下</view>
				<view class="btns flexac config size26 white" @click="SellBtn">立即提现</view>
			</view>
		</view>


		<view class="viewboxs auto m-top20">
			 <u-parse :content="pageData.desc" :domain="imgUrl"></u-parse>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				money:'',
				list1: [{
					name: '到银行卡',
					payname:'bank',
				}, {
					name: '到微信',
					payname:'weixin',
				}, {
					name: '到支付宝',
					payname:'alipay'
				}],
				itemStyle: {
					height: '102rpx'
				},
				activeStyle: {
					color: '#000',
					fontSize: '30rpx',
					fontWeight: 'bold'
				},
				inactiveStyle: {
					color: '#333333',
					fontSize: '28rpx',
				},
				current: 0,
				broker_id: '',
				broker: '',
				payInfo: [],
				pageData: '',
				payid:'',
			}
		},
		onLoad(opt) {
			
		},
		onShow() {
			this.brokerDetail();
		},
		methods: {
			brokerDetail() {
				this.$http.get({
					url: '/BrokerApi/brokerDetail',
					data: {
						broker_id: this.broker_id
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					this.broker = result.broker;
					this.payInfo = result.payInfo;
					this.pageData = result;
					
				})
			},
			addAcount(item){
				if(item.cash_method == 1) return this.toUrl(`addBank`);
				this.toUrl(`addKuan?cash_method=${item.cash_method}`)
			},
			SellBtn(){
				const bankId = this.payInfo[this.current].id;
				if(!bankId) return this.$Toast('未添加收款信息~');
				if(!this.money) return this.$Toast('金额不能为空~');
				if(this.money <= 0) return this.$Toast('金额输入有误~');
				this.$http.post({
					url:'/singleSaleApi/CommissionWithdrawal',
					data:{
						bankId,
						bankCard:this.payInfo[this.current].bankCard,
						cash_method:this.payInfo[this.current].cash_method,
						money:this.money,
					}
				}).then(res=>{
					if(res.errcode != '100') return this.$Toast(res.msg);
					this.money = '';
					this.$Toast(res.msg);
					this.brokerDetail();
				})
			},
			Exchange(){
				this.money = this.pageData.income
			},
			click(e) {
				// this.payid = this.payInfo[e.payname].id;
				this.current = e.index;
			}
		},
		filters:{
			methodTxt(cash_method){
				switch(cash_method){
					case 1:
					   return '点击添加银行卡';
					case 4:
					    return '点击添加微信收款码';
					case 5:
					    return '点击添加支付宝收款码';
					default:
					    return '';
				}
			}
		},
		computed: {
			...mapState(['vid', 'color']),
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.CodineIMG {
		width: 100rpx;
		height: 100rpx;
	}

	.btns {
		width: 258rpx;
		height: 76rpx;
		border-radius: 38rpx;
	}

	.config {
		background: linear-gradient(90deg, #67A4FF 0%, #287AF5 100%);
	}

	.Jifen {
		flex: 1;
		height: 80rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.jifenIcon {
		width: 27rpx;
		height: 29rpx;
	}

	.duihne {
		width: 670rpx;
		background-color: #ffffff;
		margin: 30rpx auto 0;
		padding: 30rpx 30rpx 50rpx 30rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.navBox {
		width: 670rpx;
		margin: 0 auto;
	}

	.bank {
		width: 670rpx;
		min-height: 180rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		padding: 20rpx;
		border-radius: 20rpx;

	}

	.backgg {
		display: flex;
		align-items: center;
		padding-left: 50rpx;
		background: linear-gradient(310deg, #67A4FF 0%, #287AF5 100%);
	}

	.wechat {
		width: 670rpx;
		min-height: 180rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		padding: 20rpx;
		border-radius: 20rpx;

	}

	.wechatImg {
		width: 100%;
		height: 300rpx;
	}

	.list {
		width: 100%;
		height: 203rpx;
		background-image: url('http://sraimgcdn2.mogoie.com/Uploads/xiangqing/userbg.png');
		background-repeat: no-repeat;
		background-size: cover;
		
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.info {
		font-size: 22rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.Abstract {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.scale {
		font-size: 26rpx;

	}

	.SellBtn {
		width: 130rpx;
		height: 58rpx;
		background: linear-gradient(90deg, #67A4FF 0%, #287AF5 100%);
		border-radius: 26rpx;
		color: #ffffff;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>s